<template>
    <!-- header -->
    <div class="nav-container page-component">
        <!--左侧导航 #start -->
        <div class="nav left-nav">
            <div class="nav-item">
                <span class="v-link clickable dark" onclick="javascript:window.location='/user'">实名认证
                </span>
            </div>
            <div class="nav-item">
                <span class="v-link clickable dark" onclick="javascript:window.location='/order'">
                    挂号订单
                </span>
            </div>
            <div class="nav-item selected">
                <span class="v-link selected dark" onclick="javascript:window.location='/patient'">
                    就诊人管理
                </span>
            </div>
            <div class="nav-item">
                <span class="v-link clickable dark"> 修改账号信息 </span>
            </div>
            <div class="nav-item">
                <span class="v-link clickable dark"> 意见反馈 </span>
            </div>
        </div>
        <!-- 左侧导航 #end -->
        <!-- 右侧内容 #start -->
        <div class="page-container">
            <div class="personal-patient">
                <div class="header-wrapper">
                    <div class="title">添加就诊人</div>
                </div>
                <div>
                    <div class="sub-title">
                        <div class="block"></div>
                        就诊人信息
                    </div>
                    <div class="content-wrapper">
                        <el-form :model="patient" label-width="110px" label-position="left" ref="patient"
                            :rules="validateRules">
                            <el-form-item prop="name" label="姓名：">
                                <el-input v-model="patient.name" placeholder="请输入真实姓名全称" class="input v-input" />
                            </el-form-item>
                            <el-form-item prop="certificatesType" label="证件类型：">
                                <el-select v-model="patient.certificatesType" placeholder="请选择证件类型"
                                    class="v-select patient-select">
                                    <el-option v-for="item in certificatesTypeList" :key="item.value" :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="certificatesNo" label="证件号码：">
                                <el-input v-model="patient.certificatesNo" placeholder="请输入证件号码"
                                    class="input v-input" />
                            </el-form-item>
                            <el-form-item prop="sex" label="性别：">
                                <el-radio-group v-model="patient.sex">
                                    <el-radio :label="1">男</el-radio>
                                    <el-radio :label="0">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="birthdate" label="出生日期：">
                                <el-date-picker v-model="patient.birthdate" class="v-date-picker" type="date"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item prop="phone" label="手机号码：">
                                <el-input v-model="patient.phone" placeholder="请输入手机号码" maxlength="11"
                                    class="input v-input" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="sub-title">
                        <div class="block"></div>
                        建档信息（完善后部分医院首次就诊不排队建档）
                    </div>
                    <div class="content-wrapper">
                        <el-form :model="patient" label-width="110px" label-position="left" ref="patient"
                            :rules="validateRules">
                            <el-form-item prop="isMarry" label="婚姻状况：">
                                <el-radio-group v-model="patient.isMarry">
                                    <el-radio :label="0">未婚</el-radio>
                                    <el-radio :label="1">已婚</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="isInsure" label="自费/医保：">
                                <el-radio-group v-model="patient.isInsure">
                                    <el-radio :label="0">自费</el-radio>
                                    <el-radio :label="1">医保</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="addressSelected" label="当前住址：">
                                <el-cascader ref="selectedShow" v-model="patient.addressSelected" class="v-address"
                                    :props="props"></el-cascader>
                            </el-form-item>
                            <el-form-item prop="address" label="详细地址：">
                                <el-input v-model="patient.address" placeholder="应公安机关要求，请填写现真实住址"
                                    class="input v-input" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="sub-title">
                        <div class="block"></div>
                        联系人信息（选填）
                    </div>
                    <div class="content-wrapper">
                        <el-form :model="patient" label-width="110px" label-position="left">
                            <el-form-item prop="contactsName" label="姓名：">
                                <el-input v-model="patient.contactsName" placeholder="请输入联系人姓名全称"
                                    class="input v-input" />
                            </el-form-item>
                            <el-form-item prop="contactsCertificatesType" label="证件类型：">
                                <el-select v-model="patient.contactsCertificatesType" placeholder="请选择证件类型"
                                    class="v-select patient-select">
                                    <el-option v-for="item in certificatesTypeList" :key="item.value" :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="contactsCertificatesNo" label="证件号码：">
                                <el-input v-model="patient.contactsCertificatesNo" placeholder="请输入联系人证件号码"
                                    class="input v-input" />
                            </el-form-item>
                            <el-form-item prop="contactsPhone" label="手机号码：">
                                <el-input v-model="patient.contactsPhone" placeholder="请输入联系人手机号码"
                                    class="input v-input" />
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="bottom-wrapper">
                    <div class="button-wrapper">
                        <div class="v-button" @click="saveOrUpdate()">{{ submitBnt }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧内容 #end -->
    </div>
    <!-- footer -->
</template>
<script>
import "~/assets/css/hospital_personal.css";
import "~/assets/css/hospital.css";
import "~/assets/css/personal.css";

import dictApi from "@/api/yygh/dict";
import patientApi from "@/api/yygh/patient";

const defaultForm = {
    name: "",
    certificatesType: "",
    certificatesNo: "",
    sex: 1,
    birthdate: "",
    phone: "",
    isMarry: 0,
    isInsure: 0,
    provinceCode: "",
    cityCode: "",
    districtCode: "",
    addressSelected: null,
    address: "",
    contactsName: "",
    contactsCertificatesType: "",
    contactsCertificatesNo: "",
    contactsPhone: "",
    param: {},
};
export default {
    data() {
        return {
            patient: defaultForm,
            certificatesTypeList: [],
            props: {
                lazy: true,
                async lazyLoad(node, resolve) {
                    const { level } = node;
                    //异步获取省市区
                    dictApi.findByParentId(level ? node.value : "86").then((response) => {
                        let list = response.data.list;
                        let provinceList = list.map((item, i) => {
                            return {
                                value: item.id,
                                label: item.name,
                                leaf: node.level == 2 ? true : false, //可控制显示几级
                            };
                        });
                        resolve && resolve(provinceList);
                    });
                },
            },
            submitBnt: "保存",
            validateRules: {
                name: [{ required: true, trigger: "blur", message: "必须输入" }],
                certificatesType: [
                    { required: true, trigger: "blur", message: "必须输入" },
                ],
                certificatesNo: [
                    { required: true, trigger: "blur", message: "必须输入" },
                ],
                birthdate: [{ required: true, trigger: "blur", message: "必须输入" }],
                phone: [{ required: true, trigger: "blur", message: "必须输入" }],
                addressSelected: [
                    { required: true, trigger: "blur", message: "必须输入" },
                ],
                address: [{ required: true, trigger: "blur", message: "必须输入" }],
            },
        };
    },
    created() {
        this.init();
    },
    mounted() {
        if (this.$route.query.id) {
            setTimeout(() => {
                this.$refs.selectedShow.presentText =
                    this.patient.param.provinceString +
                    "/" +
                    this.patient.param.cityString +
                    "/" +
                    this.patient.param.districtString; //"北京市/市辖区/西城区";// 首次手动复制
                // this.$refs.selectedShow.value = '110000/110100/110102';
            }, 1000);
        }
    },
    methods: {
        init() {
            if (this.$route.query.id) {
                const id = this.$route.query.id;
                this.fetchDataById(id);
            } else {
                // 对象拓展运算符：拷贝对象，而不是赋值对象的引用
                this.patient = { ...defaultForm };
            }
            this.getDict();
        },

        fetchDataById(id) {
            patientApi.getById(id).then((response) => {
                this.patient = response.data.patient;
                //添加默认值
                this.patient.addressSelected = [
                    this.patient.provinceCode,
                    this.patient.cityCode,
                    this.patient.districtCode,
                ];
            });
        },
        getDict() {
            dictApi.findByDictCode("CertificatesType").then((response) => {
                this.certificatesTypeList = response.data.list;
            });
        },

        saveOrUpdate() {
            this.$refs.patient.validate((valid) => {
                if (valid) {
                    //地址处理
                    if (this.patient.addressSelected.length == 3) {
                        this.patient.provinceCode = this.patient.addressSelected[0];
                        this.patient.cityCode = this.patient.addressSelected[1];
                        this.patient.districtCode = this.patient.addressSelected[2];
                    }
                    if (!this.patient.id) {
                        this.saveData();
                    } else {
                        this.updateData();
                    }
                }
            });
        },
        // 新增
        saveData() {
            if (this.submitBnt == "正在提交...") {
                this.$message.info("重复提交");
                return;
            }
            this.submitBnt = "正在提交...";
            patientApi
                .save(this.patient)
                .then((response) => {
                    this.$message.success("提交成功");
                    window.location.href = "/patient";
                })
                .catch((e) => {
                    this.submitBnt = "保存";
                });
        },
        // 根据id更新记录
        updateData() {
            if (this.submitBnt == "正在提交...") {
                this.$message.info("重复提交");
                return;
            }
            this.submitBnt = "正在提交...";
            patientApi
                .updateById(this.patient)
                .then((response) => {
                    this.$message.success("提交成功");
                    window.location.href = "/patient";
                })
                .catch((e) => {
                    this.submitBnt = "保存";
                });
        },
    },
};
</script>
<style>
.header-wrapper .title {
    font-size: 16px;
    margin-top: 0;
}

.sub-title {
    margin-top: 0;
}

.bottom-wrapper {
    padding: 0;
    margin: 0;
}

.bottom-wrapper .button-wrapper {
    margin-top: 0;
}
</style>